<template>
<nav class="my-sider" id="sider">
  <a href="#" @click="handleChangeMemu('2')">
      <div class="item" key="2">
        <a-icon type="tool" />
          <div>工具箱</div>
      </div>
    </a>
    <a href="#" @click="handleChangeMemu('1')">
      <div class="item">
        <a-icon type="fund" />
          <div>图层</div>
      </div>
    </a>
    <a href="#" @click="handleChangeMemu('3')">
      <div class="item" v-if="is3D" key="3">
        <a-icon type="inbox" />
          <div>飞行</div>
      </div>
    </a>
    <a href="#" @click="handleChangeMemu('4')">
      <div class="item" key="4">
        <a-icon type="share-alt" />
          <div>分享</div>
      </div>
    </a>
    <a href="#" @click="handleChangeMemu('5')">
      <div class="item" v-if="is3D" key="5">
        <a-icon type="yuque" />
          <div>漫游</div>
      </div>
    </a>
    <a href="#" @click="handleChangeMemu('7')">
      <div class="item" key="7">
        <a-icon type="video-camera" />
          <div>监控</div>
      </div>
    </a>
    <a href="#" @click="handleChangeMemu('8')">
      <div class="item" key="8">
        <a-icon type="car" />
          <div>停车</div>
      </div>
    </a>
    
    <a href="#" @click="fullscreen">
      <div class="item" key="6">
        <a-icon type="fullscreen" />
          <div>全屏</div>
      </div>
    </a>
</nav>
</template>
      



<script>


export default {
    name:'mapsider2',
  data() {
    return {
        actMenu:'',
        is3D:true,
    };
  },
  //待修改
  created(){
    
  },
  methods: {
      handleChangeMemu(num){
        this.$root.$emit('click',num)
      },
      fullscreen(){
        this.$emit('full',true)
      }
  },
};
</script>


<style lang="less" scoped>

.my-sider{
    position: absolute;
    height:100vh;
    width: 75px;
    background: #001529;  
}
.item{
  color:hsla(0,0%,100%,.65);
  padding: 8px;
  margin: 0px 8px;
  font-size: 14px;
  text-align: center;
  -webkit-transition:background-color 0.25s;
  -moz-transition:background-color 0.25s;
  transition:background-color 0.25s;
  
  
}
.item i{
    font-size: 18px;
  }
a div:hover{
      text-decoration:none;
      color: white;
  }

</style>